<template>
  <el-row>
    <el-col :span="3">ResourceQuotas</el-col>
    <el-col :span="3">{{ filterTableData.length }} Items</el-col>
    <el-col :span="12">
      <NamespaceDropDown ref="namespaceDropdown"></NamespaceDropDown>
    </el-col>
    <el-col :span="6">
      <el-input
        v-model="queryString"
        placeholder="查询内容"
        name="queryString"
        clearable
        @keyup.enter.native="query"
      ></el-input>
    </el-col>
  </el-row>
  <el-row>
    <el-table :data="filterTableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="metadata.name" label="name" width="150" sortable>
        <template #default="scope">
          <a
            style="cursor: pointer; color: red"
            @click.native="openItemAsYaml(scope.row, 'Configmap')"
            >{{ scope.row.metadata.name }}</a
          >
        </template>
      </el-table-column>
      <el-table-column prop="metadata.namespace" label="namespace" width="150" sortable />

      <el-table-column label="age" width="120" prop="metadata.creationTimestamp" sortable>
        <template #default="scope">{{
          to_age(scope.row.metadata.creationTimestamp)
        }}</template>
      </el-table-column>
    </el-table>
  </el-row>

  <div class="mydialog">
    <el-dialog v-model="yamlVisible" :fullscreen="true">
      <el-tabs type="border-card">
        <el-tab-pane label="Yaml">
          <YamlEdit ref="yamlEdit"></YamlEdit>
        </el-tab-pane>
        <el-tab-pane label="Info">Info</el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import { ref, nextTick } from "vue";
import { TableMixins } from "@/mixins/TableMixins";
import NamespaceDropDown from "@/components/k8s/NamespaceDropDown.vue";
import emitter from "@/eventbus";
export default {
  name: "ResourceQuotaList",
  props: {},
  mixins: [TableMixins],
  components: { NamespaceDropDown },
  data() {
    return {
      tableData: [],
      loading: false,
      namespaces: [],
      queryString: "",
      yamlVisible: false,
    };
  },
  mounted() {
    this.query();
    emitter.on("query_namespaces", (newValue) => {
      this.namespaces = newValue;
    });
  },
  computed: {
    filterTableData() {
      return this.tableData
        .filter(
          (t) =>
            this.namespaces.length == 0 || this.namespaces.includes(t.metadata.namespace)
        )
        .filter((t) => t.metadata.name.includes(this.queryString));
    },
  },
  methods: {
    async getItems() {
      let items = await window.k8s_GetConfigmaps("");
      // console.log(items)
      return items;
    },
  },
};
</script>
<style scoped>
/*弹出框高度样式调整*/
.mydialog :deep() .el-dialog__body {
  overflow: auto;
  height: 80vh;
}

.mydialog :deep() .el-tabs--border-card {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content .el-tab-pane {
  height: 70vh;
}
</style>
